<template>
  <div class="main flex gap20">
    <div class="flex1 bg-white">
      <div style="height: 40px">
        <span class="bold">故障客户分布</span>
      </div>
      <div class="flex1" style="overflow: auto; height: calc(100% - 40px)">
        <DistributionItem
          v-for="item in state.data.distributionVOList"
          :key="item.customerName"
          class="mgb20"
          :class="{ 'active-item': item.customerName === state.activeItem.customerName }"
          :data="item"
          @click.stop="clickItem(item)"
          @customer-name-click="onCustomerNameClick"
        />
      </div>
    </div>

    <div class="right-box bg-white">
      <div class="bold">客户每月故障统计</div>
      <div class="gray mgt30 pd10">
        <div class="flex">
          <SvgIcon name="factory" />
          <span class="bold mgl10 fs20">{{ state.activeItem.customerName }}</span>
        </div>
        <div class="flex-row-center-left mgt20">
          <span style="width: 10px; height: 10px; border-radius: 50%; background: #d92329"></span>
          <span class="mgr5 mgl10 grey-text">故障最多月份</span>
          <span class="mgr30">{{ state.currentMax.dateString }}</span>
          <span class="mgr5 grey-text">故障数</span>
          <span class="up bold">{{ state.currentMax.totalFault }}</span>
        </div>
        <div class="flex-row-center-left mgt10">
          <span style="width: 10px; height: 10px; border-radius: 50%; background: #119c59"></span>
          <span class="mgr5 mgl10 grey-text">故障最少月份</span>
          <span class="mgr30">{{ state.currentMin.dateString }}</span>
          <span class="mgr5 grey-text">故障数</span>
          <span class="down bold">{{ state.currentMin.totalFault }}</span>
        </div>
      </div>
      <div class="mgt20">
        <vxe-table :data="state.currentTableData" border header-align="center" align="center" height="500" :row-style="rowStyle">
          <vxe-column field="dateString" title="年月" />
          <vxe-column field="totalFault" title="故障数" />
          <vxe-column field="faultLineCount" title="故障产线数" />
          <template #empty>
            <div class="flex-column-center-center">
              <SvgIcon :width="100" :height="100" name="empty-data" color="#606266" />
              <span>暂无数据~</span>
            </div>
          </template>
        </vxe-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { reactive } from 'vue'
  import { max, min } from 'xe-utils'
  import request from '@/service'
  import router from '@/router'
  import { Ui } from '@/utils'
  import DistributionItem from './distribution-item.vue'
  import type { FaultCustomerData, FaultOverview, FaultDistribution } from '../config'
  import { type VxeTablePropTypes } from 'vxe-table'

  const state = reactive({
    data: {
      faultCustomerVO: {} as FaultOverview,
      distributionVOList: [] as FaultDistribution[]
    },
    activeItem: {} as FaultDistribution,
    currentTableData: [] as FaultDistribution[],
    currentMax: {} as FaultDistribution,
    currentMin: {} as FaultDistribution
  })

  /**----------------------------methods----------------------------------------------------------------------- */

  const rowStyle: VxeTablePropTypes.RowStyle<FaultDistribution> = ({ row }) => {
    if (!row.totalFault && !row.faultLineCount) {
      return {
        backgroundColor: '#F0FFF5'
      }
    }
  }

  const clickItem = (item: FaultDistribution) => {
    state.activeItem.customerName = item.customerName
    getCurrentData()
  }

  /**当前客户故障表格数据 */
  const getCurrentData = () => {
    request.get<FaultDistribution[]>('/fault/getFaultByCustomerName', { customerName: state.activeItem.customerName }).then(res => {
      if (res.code !== 0) return Ui.useMessage('error', res.msg)
      state.currentTableData = res.data

      state.currentMax = max(res.data, 'totalFault')
      state.currentMin = min(res.data, 'totalFault')
    })
  }

  /**跳转故障清单 */
  const onCustomerNameClick = (data: FaultDistribution) => {
    const { customerName } = data
    router.push({
      path: '/fault/list',
      query: {
        customerName
      }
    })
  }

  /**获取数据 */
  const query = () => {
    request.get<FaultCustomerData>('/fault/getFaultCustomer').then(res => {
      if (res.code !== 0) return Ui.useMessage('error', res.msg)
      state.data = res.data
      if (res.data.distributionVOList.length) clickItem(res.data.distributionVOList[0])
    })
  }

  /**----------------------------lifecycle----------------------------------------------------------------------- */

  query()
</script>

<style scoped lang="less">
  .main {
    background: #f2f6fc !important;
    padding: 0;
    .gray {
      padding: 28px 10px;
      background: #f2f6fc;
    }
    .up {
      color: #d92329;
    }
    .down {
      color: #119c59;
    }
    .active-item {
      border-radius: 4px;
      border: 1px solid var(--el-menu-active-color);
      box-shadow: 2px 6px 8px 0px rgba(0, 0, 0, 0.12);
    }
    .bg-white {
      padding: 10px;
      background: #fff;
    }
    .right-box {
      width: 500px;
    }
  }
</style>
